var RNFS = require('react-native-fs');
import RNFileSelector from 'react-native-file-selector';
import React, { Component } from 'react';
import FileUtil from '../../../../utils/file'
import { headers, data } from '../json'
import XLSX from 'xlsx';
import { Modal, View, Text, TextInput, TouchableHighlight, StyleSheet, Image, ImageBackground, TouchableOpacity, PermissionsAndroid, Alert, Pressable } from 'react-native'
import { color } from 'react-native-reanimated';
import { changeloginStatus, getexam } from '../../../../actions/actionCreators'
import store from '../../../../store/configureStore'

class Answermodel extends Component {
    constructor(props) {
        super(props);
        this.myRef1 = React.createRef();
        this.state = {
            counts: [10, 20, 50]
        }

        console.log(121212, props)

    }
    useranswer = (count) => {
        console.log(count)
        this.props.enterDetail(this.props.examitem, count)

    }
    render() {
        var count = this.props.examitem.Allcount
        let checkarr;
        if (count >= 50) {
            checkarr = [10, 20, 50]
        } else if (count >= 20) {
            checkarr = [10, 20]
        } else if (count >= 10) {
            checkarr = [10]
        } else {
            // 小于10题不提供答题要求重载题库
            // checkarr=[count]
            checkarr = []

        }
        // this.setState({checkarr:checkarr})
        this.myRef1.current = checkarr

        console.log(this.props.examitem)
        return (
            <Modal
                animationType="slide"
                transparent={true}
                // 继承属性和方法
                visible={this.props.AnswerVisible}
                onRequestClose={() => {
                    Alert.alert("Modal has been closed.");
                }}
            >
                <View style={styles.centeredView}>

                    <ImageBackground style={{ ...styles.modalView }}
                        source={require('../../../../../assets/imgs/a1/background.png')}
                        imageStyle={{ resizeMode: 'stretch' }}
                    >
                        <Text style={styles.modalText} >请选择出题数量</Text>
                        <Pressable style={{ position: "absolute", right: 10, top: 5, zIndex: 100, }} onPress={() => { this.props.handAnswerVisible(false, true) }}><Image
                            style={{ width: 40, height: 40 }}
                            source={require('../../../../../assets/imgs/close.png')}

                        /></Pressable >

                        <View style={styles.contaner}>
                            <View style={styles.contanerleft}>

                                <ImageBackground style={styles.tinyLogo}
                                    source={{ uri: `file://${this.props.examitem.picturepath}` }}
                                >
                                   
                                       <View style={styles.shawdows}>
                                            <Text style={{ textAlign: "center", color: "#fff" }}>{this.props.examitem.title}</Text>
                                            <View style={{marginTop:10}}>
                                            <Text style={{ color: "#fff", fontSize: 10 }} >单选题:{this.props.examitem.danxuan}</Text>
                                            <Text style={{ color: "#fff", fontSize: 10 }} >多选题:{this.props.examitem.duoxuan}</Text>
                                            <Text style={{ color: "#fff", fontSize: 10 }} >判断题:{this.props.examitem.panduan}</Text>
                                        </View>
                                        </View>
                                      


                                </ImageBackground>
                            </View>
                            <View style={styles.contanerright}>
                                {
                                    checkarr.length > 0 ? (
                                        checkarr.map((item, index) => {
                                            return (
                                                <TouchableHighlight
                                                    style={{ ...styles.chooseButton }}
                                                    key={index}
                                                    onPress={() => { this.useranswer(item) }}
                                                >
                                                    <Text style={styles.textStyle}>{item + '题'}</Text>
                                                </TouchableHighlight>

                                            )
                                        })
                                    ) : (<Text style={{ ...styles.textStyle, width: 100 }} onPress={() => { }}>题库数量不足，请联系工作人员，或重选出题范围。</Text>)
                                }


                                <TouchableHighlight
                                    style={{ ...styles.chooseButton }}
                                    onPress={() => { this.props.handAnswerVisible(false) }}
                                >
                                    <Text style={styles.textStyle} >重新选择出题范围</Text>



                                </TouchableHighlight>
                            </View>
                        </View>

                        {/* <TouchableHighlight
                            style={{ ...styles.openButton }}
                        // onPress={this.login}
                        >
                           <Text style={styles.textStyle} onPress={() => {  }}>{'替换更新'}</Text>

                        </TouchableHighlight> */}
                    </ImageBackground>
                </View>
            </Modal>
        );
    }
}

export default Answermodel;
const styles = StyleSheet.create({
    shawdows: {
        backgroundColor: 'rgba(0, 0, 0.1, 0.2)',
        padding: 20,
    },
    // model样式
    centeredView: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        marginTop: 22
    },
    modalView: {
        width: 500,
        height: 300,
        margin: 20,
        // backgroundColor: "#3078BB",
        borderRadius: 20,
        padding: 35,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5
    },
    modalView1: {
        // flex: 1,
        // flexDirection:"row",
        // justifyContent: "center",
        // alignItems: "center",
        marginTop: 50,
        width: 850,
        height: 400,
        left: 50,
        margin: 20,
        backgroundColor: "#3078BB",
        borderRadius: 20,
        padding: 35,
        alignItems: "center",
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5
    },
    leftLogo1: {
        position: "absolute",
        left: -75,
        width: 80,
        height: 80,
        top: 100

    },
    rightLogo1: {
        position: "absolute",
        right: -55,
        width: 80,
        height: 80,
        top: 100


    },
    imgs1: {

        height: 100,
        width: 100
    },
    openButton: {
        backgroundColor: "#CC975D",

        borderRadius: 5,
        padding: 10,
        elevation: 2,
        marginTop: 10,
        width: 100,
        fontSize: 8,
    },
    chooseButton: {
        backgroundColor: "#D59652",
        borderColor: '#80B3D5',
        borderRadius: 5,
        padding: 5,
        elevation: 2,
        marginTop: 10,
        width: 100,
        fontSize: 5,
        marginBottom: 10,
      

    },
    fmButton: {
        backgroundColor: "#62AFDD",
        borderRadius: 5,
        padding: 10,
        elevation: 2,
        marginTop: 10,
        width: 100,
        fontSize: 8,
        marginLeft: 50

    },
    textStyle: {
        color: "white",
        fontWeight: "bold",
        textAlign: "center",
        fontSize: 10
    },
    modalText: {
        marginBottom: 15,
        textAlign: "center",
        color: '#fff'
    },
    contaner: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        height: 180

    },
    contanerleft: {
        width: 150,
        marginRight: 100,
        marginLeft: 50,
        borderWidth: 2,
        borderColor: '#62AFDD',
        shadowColor: "black",
        textAlign: "center",
        padding: 20,



    },
    tikutitle: {
        textAlign: "center",
        marginTop: 50,

    },
    yikutype: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",

    },
    contanerright: {
        width: 200,
        // backgroundColor: "red",



    },
    tinyLogo: {
        resizeMode: 'stretch',
        position: 'absolute',
        width: 150,
        height: 180,
        justifyContent: 'space-around',
        alignItems: "center"


    },
    choosefengmian: {
        width: 700,
        height: 300,
        marginLeft: 50,
        marginRight: 50,
        display: "flex",
        flexDirection: 'row',
        flexWrap: "wrap",
        justifyContent: 'space-around',
        alignItems: "center"

    },
    images: {
        width: 120,
        height: 140,
        marginTop: 10,
        borderColor: '#78FAF6',
        borderWidth: 2,
        shadowColor: "#78FAF6",
        display: 'flex',
        justifyContent: 'center',
        alignItems: "center"
        // shadowOffset: {
        //     width: 0,
        //     height: 0
        // },
        // shadowOpacity: 0.25,
        // shadowRadius: 3.84,
        // elevation: 5
        // flex:1
    },
    a1: {
        width: 118,
        height: 138
    }
})
